<template>
  <div class="app-container">


  <!--查询表单-->
<div class="search-div">
      <el-form label-width="70px" size="small">
      <el-row>
          <!-- 条件查询 -->
          <el-col :span="6">
          <el-form-item label="关键字"  label-width="100px">
              <el-input style="width: 100%" v-model="searchObj.keyword" placeholder="活动名称"></el-input>
          </el-form-item>
          </el-col>
          
          <!-- 创建时间查询 -->
          <el-col :span="6">
              <el-form-item label="操作时间"  label-width="100px">
                  <el-date-picker
                  v-model="createTimes"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="margin-right: 10px; width: 100%"
                  />
              </el-form-item>
          </el-col>

          <!-- 考虑是否添加小区 [选择] -->


          <el-col :span="6" >
          <el-form-item label="活动状态" label-width="100px">
              <template>
                  <el-select v-model="searchObj.status" placeholder="请选择"  style="margin-right: 10px; width: 100%">
                      <el-option
                      v-for="item in acticityStatus"
                      :key="item.id"
                      :label="item.value"
                      :value="item.id">
                      </el-option>
                  </el-select>
          </template>
         </el-form-item>
       </el-col>
  
      </el-row>
      <el-row style="display:flex">
          <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
          
      </el-row>
      </el-form>
  </div>

      <!-- 工具条 -->
<div class="tools-div">
  <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
</div>

  <!-- 表格 -->
  <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      style="width: 100%;margin-top: 10px;">

      <el-table-column
      label="序号"
      width="70"
      align="center">
      <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
      </template>
      </el-table-column>
      <el-table-column prop="param.communityName" label="所属小区" />
      <el-table-column prop="title" label="活动标题" />
      <el-table-column prop="address" label="活动地点" />
      <el-table-column prop="content" label="活动描述" />
      <el-table-column prop="organizer" label="举办单位" />
      <el-table-column prop="status" label="活动状态" >
          <template slot-scope="scope">
              <el-tag type="warning" v-if="scope.row.status===0">未开始</el-tag>
              <el-tag type="primary" v-if="scope.row.status===1">进行中</el-tag>
              <el-tag type="danger" v-if="scope.row.status===2">已结束</el-tag>
          </template>
      </el-table-column>
      <el-table-column prop="startTime" label="活动开始时间" />
      <el-table-column prop="endTime" label="活动截止时间" />
      <el-table-column label="操作" width="200" align="center">
      <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除"/>
      </template>
      </el-table-column>
  </el-table>

  <!--  添加/修改-->
  <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
      <el-form ref="dataForm" :model="sysActivity" label-width="150px" size="small" style="padding-right: 40px;">

        <el-form-item label="所属小区">
          <template>
          <el-select v-model="sysActivity.communityId" placeholder="请选择">
            <el-option
              v-for="item in communityList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
        </el-form-item>
      <el-form-item label="活动标题">
          <el-input v-model="sysActivity.title"/>
      </el-form-item>
      <el-form-item label="活动地点">
          <el-input v-model="sysActivity.address"/>
      </el-form-item>
      <el-form-item label="活动描述">
          <el-input v-model="sysActivity.content"/>
      </el-form-item>
      <el-form-item label="举办单位">
          <el-input v-model="sysActivity.organizer"/>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
                v-model="sysActivity.startTime"
                type="datetime"
                placeholder="选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"  style="width: 100%;">
            </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
                v-model="sysActivity.endTime"
                type="datetime"
                placeholder="选择结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"  style="width: 100%;">
            </el-date-picker>
      </el-form-item>
      <el-form-item label="活动状态">
          <el-radio-group v-model="sysActivity.status" >
              <el-radio :label="0">未开始</el-radio>
              <el-radio :label="1">进行中</el-radio>
              <el-radio :label="2">已结束</el-radio>
          </el-radio-group>
      </el-form-item>

      <el-form-item label="创建时间" v-if="sysActivity.id">
          <el-input v-model="sysActivity.createTime" disabled/>
      </el-form-item>
      <!-- 备注 -->
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
      <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
      </span>
  </el-dialog>

          <!-- 分页组件 -->
  <el-pagination
  :current-page="page"
  :total="total"
  :page-size="limit"
  style="padding: 30px 0; text-align: center;"
  layout="total, prev, pager, next, jumper"
  @current-change="fetchData"
  />
  </div>
</template>

<script>
import api from '@/api/sysActivity/activity'
import comApi from '@/api/sysCommunity/community'
export default {
  data(){
      return {

      listLoading:true,
      list:[],
      total:0,
      page:1,
      limit:3,
      searchObj:{},
      sysActivity:{},
      dialogVisible : false,
      acticityStatus:[
      // 0-活动未开始（默认），1-活动进行中，2-活动已结束
          {
              id:0,
              value:'未开始',
          },
          {
              id: 1,
              value: '进行中',
          },
          {
              id: 2,
              value: '已结束',
          },
      ],
        //小区列表
        communityList:[],
    }
      
  },
  created(){
      this.fetchData(1);
      this.fetchCommunityList();
  },
  methods:{

     //查询所有小区 放入选择框
     fetchCommunityList(){
          comApi.finAllCommunity().then(res=>{
            this.communityList = res.data
          })
      },
      //得到数据
      fetchData(page=1){
              this.listLoading = true; 
              this.page = page;
              if (this.createTimes && this.createTimes.length == 2) {
                  this.searchObj.createTimeBegin = this.createTimes[0];
                  this.searchObj.createTimeEnd = this.createTimes[1];
              }
          
          api.findPageInfo(this.page,this.limit,this.searchObj).then(res=>{
              //    console.log(res.data)
              this.list = res.data.records;
              this.total = res.data.total;
              this.listLoading = false;
          })
      },

      //重置按钮
      resetData(){
          // 清空表单
          this.searchObj={};
          // 再次刷新列表数据
          this.fetchData();
      },
      //修改按钮
      edit(id){
      api.findActivityById(id).then(res=>{
          // console.log(res)
          this.sysActivity = res.data
          //弹出弹框
          this.openDialog();
      })
      },
      //添加按钮
      add(){
      this.sysActivity = {};
      this.openDialog();
      },
      //开启弹框 查询选择框列表 
  openDialog(){
      this.dialogVisible = true;
  },
   removeDataById(id){
      this.$confirm('此操作将永久去除该活动, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
          // 点击确定
          api.removeActivityById(id).then(response=>{
              // 1.给出提示
              this.$message({
          type: 'success',
          message: '删除成功!'
          });
          this.listLoading = true;
              //2. 再次刷新数据列表
              this.fetchData()
          })

          
      })
      },
      //保存/修改
      saveOrUpdate(){
      if(this.sysActivity.id){
          //修改
          this.update();
      }else{
          this.addCar();
      }
      },

      update(){
      api.updateActivity(this.sysActivity).then(res=>{
              // 1.给出提示
              this.$message({
          type: 'success',
          message: '修改成功!'
          });
          //刷新列表
          this.fetchData();
          //关闭弹框
          this.dialogVisible = false;
      })
      },

      addCar(){
      api.addActivity(this.sysActivity).then(res=>{
              // 1.给出提示
              this.$message({
          type: 'success',
          message: '新增成功!'
          });
          //刷新列表
          this.fetchData();
          //关闭弹框
          this.dialogVisible = false;
      })
      
      },

  }

}
</script>

<style>

</style>